<template>
  	<view class="zai-box">
  		<scroll-view scroll-y class="page">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="content">修改密码</block>
			</cu-custom>
  			<view class="text-center" :style="[{animation: 'show ' + 0.4+ 's 1'}]">
  				<view class="danqina">当前角色：{{rolename}}</view>
  			</view>
  			<view class="box padding-lr-xl login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
  				<block>
  					<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
  						<view class="title"><text class="cuIcon-people margin-right-xs"></text>账号:</view>
  						<input disabled placeholder="请输入用户名" name="input" v-model="username"></input>
  					</view>
					<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-lock margin-right-xs"></text>设置新密码:</view>
						<input class="uni-input" placeholder="请输入新密码" :password="!showPassword" v-model="password" />
						<view class="action text-lg">
							<text :class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']"
								@click="changePassword"></text>
						</view>
					</view>
					<view class="text-center margin-top">
						<view class="flex flex-direction">
							<button class="cu-btn lg bg-blue shadow" :class="[shape=='round'?'round':'']" :loading="loading" @tap="onLogin"><text
									space="emsp">{{loading ? "修改密码中...":" 修改密码 "}}</text></button>
						</view>
					</view>
  				</block>

  				<!-- #ifdef APP-PLUS -->
  				<view class="padding flex flex-direction  text-center">
  					当前版本:{{version}}
  				</view>
  				<!-- #endif -->

  			</view>
  		</scroll-view>
  		<!-- 登录加载弹窗 -->
  		<view class="cu-load load-modal" v-if="loading">
  			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
  			<image src="/static/home/128/logo.jpg" mode="aspectFit" class="round"></image>
  			<view class="gray-text">登录中...</view>
  		</view>
  	</view>

  </template>

  <script>
  	import {mapActions} from "vuex"
	import {USER_INFO} from "@/common/util/constants"
  	import configService from '@/common/service/config.service.js';
	import server from '@/api/server.js'
  	export default {
  		data() {
  			return {
				rolename:'',
  				shape: '', //round 圆形
  				loading: false,
  				username: '',
  				password: '',
  				phoneNo: '',
  				smsCode: '',
  				showPassword: false, //是否显示明文
  				smsCountDown: 0,
  				smsCountInterval: null,
  				toggleDelay: false,
  				version: '',
  			};
  		},
  		mounted() {
			var role = this.$store.getters.role
			console.log(this.$store.getters.userinfo,'66666')
			this.username = this.$store.getters.userinfo.username
			switch(role){
				case 'admin':
					this.rolename = '管理员'
					break;
				case 'check':
					this.rolename = '排查员'
					break;
				case 'auditor':
					this.rolename = '审核员'
					break;
				case 'linkman':
					this.rolename = '区联系人'
					break;
				case 'client':
					this.rolename = '客户'
					break;
				case 'checkauditor':
					this.rolename = '排审员'
					break;
				default:
					this.rolename = '管理员'
						
			}
  		},
  		computed: {
  		},
  		methods: {
  			onLogin: function() {
  				if (!this.username || this.username.length == 0) {
  					this.$tip.toast('请填写用户名');
  					return;
  				}
  				if (!this.password || this.password.length == 0) {
  					this.$tip.toast('请输入新密码');
  					return;
  				}
  				let loginParams = {
  					username: this.username,
  					password: this.password
  				}
  				this.loading = true;
  				server.changePassword(loginParams).then((res) => {
  					this.loading = false;
  					if (res.data.success) {
							this.$tip.success('修改成功,请重新登录!')
							this.$Router.replaceAll({
								name: 'login'
							})
  
  					} else {
  						this.$tip.alert(res.data.message);
  					}
  				}).catch((err) => {
  					let msg = err.data.message || "请求出现错误，请稍后再试"
  					this.loading = false;
  					this.$tip.alert(msg);
  				}).finally(() => {
  					this.loading = false;
  				})
  			},
  			changePassword() {
  				this.showPassword = !this.showPassword;
  			},
  			requestFailed(err) {
  				this.$message.warning("修改密码失败")
  			},
  		},
  		beforeDestroy() {
  			if (this.smsCountInterval) {
  				clearInterval(this.smsCountInterval);
  			}
  		},
  	}
  </script>

  <style>
  	.cu-form-group {
  		padding: 0.5px 15px;
  		;
  	}

  	.login-paddingtop {
  		padding-top: 100upx;
  	}

  	.zai-box {
  		padding-top: 100upx;
  		position: relative;
  	}

  	.zai-logo {
  		width: 200upx;
  		height: 150px;
  	}

  	.zai-title {
  		font-size: 58upx;
  		color: #000000;
  		text-align: center;
  	}

  	.input-placeholder,
  	.zai-input {
  		color: #94afce;
  	}

  	.zai-label {
  		padding: 60upx 0;
  		text-align: center;
  		font-size: 30upx;
  		color: #a7b6d0;
  	}

  	.zai-btn {
  		background: #ff65a3;
  		color: #fff;
  		border: 0;
  		border-radius: 100upx;
  		font-size: 36upx;
  	}

  	.zai-btn:after {
  		border: 0;
  	}

  	/*按钮点击效果*/
  	.zai-btn.button-hover {
  		transform: translate(1upx, 1upx);
  	}
	page{
		background: white;
		height: 100%;
	}
	.danqina{
		font-size: 14px;
		font-weight: bold;
	}
	.cu-form-group {
	    padding: 6.5px 15px!important;
	}
  </style>
